<template>
  <div class="merchant-list-container">
    <div class="page-header">
      <h2>商家列表</h2>
    </div>
    
    <!-- 搜索条件 -->
    <el-card class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="关键词">
          <el-input v-model="filterForm.keyword" placeholder="店铺名称/联系人/电话" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.status" placeholder="全部" clearable>
            <el-option label="待审核" :value="0"></el-option>
            <el-option label="已通过" :value="1"></el-option>
            <el-option label="已拒绝" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 表格数据 -->
    <el-card class="list-card">
      <el-table :data="merchantList" style="width: 100%" v-loading="loading" border>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="storeName" label="店铺名称"></el-table-column>
        <el-table-column prop="contact" label="联系人"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="businessType" label="经营类型"></el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="170"></el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="success">已通过</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="danger">已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="viewDetail(scope.row)">查看详情</el-button>
            <el-button v-if="scope.row.status === 0" size="mini" type="success" @click="handleAudit(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 商家详情对话框 -->
    <el-dialog title="商家详情" :visible.sync="detailVisible" width="60%">
      <div v-if="currentMerchant">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="店铺名称">{{ currentMerchant.storeName }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ currentMerchant.contact }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentMerchant.phone }}</el-descriptions-item>
          <el-descriptions-item label="经营类型">{{ currentMerchant.businessType }}</el-descriptions-item>
          <el-descriptions-item label="店铺地址" :span="2">{{ currentMerchant.address }}</el-descriptions-item>
          <el-descriptions-item label="店铺简介" :span="2">{{ currentMerchant.description }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="image-container">
          <div class="image-item">
            <div class="image-title">营业执照</div>
            <el-image 
              style="width: 200px; height: 200px" 
              :src="currentMerchant.licenseImage" 
              fit="cover">
            </el-image>
          </div>
          <div class="image-item">
            <div class="image-title">身份证正面</div>
            <el-image 
              style="width: 200px; height: 120px" 
              :src="currentMerchant.idCardFront" 
              fit="cover">
            </el-image>
          </div>
          <div class="image-item">
            <div class="image-title">身份证背面</div>
            <el-image 
              style="width: 200px; height: 120px" 
              :src="currentMerchant.idCardBack" 
              fit="cover">
            </el-image>
          </div>
        </div>
        
        <div v-if="currentMerchant.status === 2" class="reject-reason">
          <div class="reason-title">拒绝原因：</div>
          <div class="reason-content">{{ currentMerchant.rejectReason }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
        <el-button 
          v-if="currentMerchant && currentMerchant.status === 0" 
          type="success" 
          @click="submitAudit(1)">通过</el-button>
        <el-button 
          v-if="currentMerchant && currentMerchant.status === 0" 
          type="danger" 
          @click="submitAudit(2)">拒绝</el-button>
      </span>
    </el-dialog>

    <!-- 拒绝原因对话框 -->
    <el-dialog title="请输入拒绝原因" :visible.sync="rejectVisible" width="30%">
      <el-form>
        <el-form-item label="拒绝原因" required>
          <el-input 
            type="textarea" 
            v-model="rejectReason" 
            :rows="4" 
            placeholder="请输入拒绝商家申请的原因">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmReject">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMerchantList, getMerchantDetail, auditMerchant } from '@/api/merchant';

export default {
  name: 'MerchantList',
  data() {
    return {
      loading: false,
      filterForm: {
        keyword: '',
        status: ''
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      merchantList: [],
      detailVisible: false,
      rejectVisible: false,
      currentMerchant: null,
      rejectReason: ''
    }
  },
  created() {
    this.fetchMerchantList();
  },
  methods: {
    fetchMerchantList() {
      this.loading = true;
      
      // 构建请求参数
      const params = {
        page: this.pagination.currentPage,
        size: this.pagination.pageSize,
        keyword: this.filterForm.keyword || undefined,
        status: this.filterForm.status !== '' ? this.filterForm.status : undefined
      };
      
      // 调用真实API获取商家列表
      getMerchantList(params)
        .then(res => {
          this.merchantList = res.data.list;
          this.pagination.total = res.data.total;
        })
        .catch(err => {
          console.error('获取商家列表失败', err);
          this.$message.error('获取商家列表失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    handleSearch() {
      this.pagination.currentPage = 1;
      this.fetchMerchantList();
    },
    
    resetSearch() {
      this.filterForm = {
        keyword: '',
        status: ''
      };
      this.handleSearch();
    },
    
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.fetchMerchantList();
    },
    
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.fetchMerchantList();
    },
    
    viewDetail(row) {
      this.loading = true;
      getMerchantDetail(row.id)
        .then(res => {
          this.currentMerchant = res.data;
          this.detailVisible = true;
        })
        .catch(err => {
          console.error('获取商家详情失败', err);
          this.$message.error('获取商家详情失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    handleAudit(row) {
      this.loading = true;
      getMerchantDetail(row.id)
        .then(res => {
          this.currentMerchant = res.data;
          this.detailVisible = true;
        })
        .catch(err => {
          console.error('获取商家详情失败', err);
          this.$message.error('获取商家详情失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    submitAudit(status) {
      if (status === 2) {
        // 如果是拒绝，打开拒绝原因对话框
        this.rejectVisible = true;
      } else {
        // 如果是通过，直接提交
        this.auditMerchant(status);
      }
    },
    
    confirmReject() {
      if (!this.rejectReason) {
        this.$message.warning('请输入拒绝原因');
        return;
      }
      
      this.auditMerchant(2);
      this.rejectVisible = false;
    },
    
    auditMerchant(status) {
      const params = {
        id: this.currentMerchant.id,
        status: status,
        reason: status === 2 ? this.rejectReason : ''
      };
      
      this.loading = true;
      auditMerchant(params)
        .then(() => {
          this.$message.success(status === 1 ? '审核通过成功' : '审核拒绝成功');
          this.detailVisible = false;
          this.rejectReason = '';
          this.fetchMerchantList(); // 刷新列表
        })
        .catch(err => {
          console.error('审核失败', err);
          this.$message.error('审核操作失败');
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
}
</script>

<style scoped>
.merchant-list-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.list-card {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.image-container {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
}

.image-item {
  margin-right: 20px;
  margin-bottom: 20px;
}

.image-title {
  margin-bottom: 8px;
  font-weight: bold;
}

.reject-reason {
  margin-top: 20px;
  padding: 10px;
  background-color: #fff8f8;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
}

.reason-title {
  font-weight: bold;
  color: #f56c6c;
  margin-bottom: 5px;
}

.reason-content {
  color: #606266;
  line-height: 1.5;
}
</style> 